<template>
  <div class="echarts-contain">
    <div id="main" style="width: 50%; height: 465px;"></div>
    <div class="table-contain">
      <div class="title">2月份店内各项业务数据 </div>
      <div class="table-name">
        <el-table :data="tableData" style="width: 100%" border :header-cell-style="{ background: '#f5f7fa' }">
          <el-table-column prop="name" label="店内营销" width="120">
          </el-table-column>
          <el-table-column prop="value" label="业务量" width="120">
          </el-table-column>
          <el-table-column prop="Proportion" label="占比" width="120">
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
  props: {
    title: {
      type: String,
      default: ''
    },
    dataList: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      myChart: null,
      tableData: [
        {
          name: '系统业务',
          value: 10000,
          Proportion: '10%'
        },
        {
          name: '后台审核',
          value: 10000,
          Proportion: '10%'
        },
        {
          name: '话务接听',
          value: 10000,
          Proportion: '10%'
        },
        {
          name: '激活车次',
          value: 10000,
          Proportion: '10%'
        },
        {
          name: '线上业务',
          value: 10000,
          Proportion: '10%'
        },
        {
          name: '店内营销',
          value: 10000,
          Proportion: '10%'
        },
        {
          name: '大厅咨询',
          value: 10000,
          Proportion: '10%'
        },
        {
          name: '投诉及其他',
          value: 10000,
          Proportion: '10%'
        },
      ]
    }
  },
  mounted() {
    window.addEventListener("resize", this.resize);
  },
  beforeDestroy() {
    if(!this.myChart){
      return
    }
    window.removeEventListener("resize", this.resize);
    this.myChart.dispose()
  },
  watch: {
    dataList: {
      handler(val) {
        this.initData()
      },
      deep: true
    }
  },
  methods: {
    initData() {
      var chartDom = document.getElementById('main');
      this.myChart = echarts.init(chartDom);
      var option;
      option = {
        title: {
          text: this.title,
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
        },
        legend: {
          // data: ["皖北", "皖中", '皖南'],
          top: 'bottom',
          left: 'center',
          textStyle: {
            color: "#000",
          },
          // orient: 'vertical',
        },
        series: [
          {
            type: 'pie',
            radius: '35%',
            center: ['45%', '50%'],
            selectedMode: 'single',
            data: this.dataList,
            // label: {
            //     formatter: '{b} : {c} ({d}%)'
            // },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };

      option && this.myChart.setOption(option);
    },
    // 页面缩放
    resize() {
      this.myChart.resize();
    },
  }
}
</script>

<style lang="scss" scoped>
.echarts-contain {
  width: 100%;
  display: flex;
}
.title{
  font-weight: 900;
  margin-bottom: 10px;
}
.table-contain{
  margin-left: 20px;
  height: 465px;
}
</style>